<template>
  <div id="app" style="overflow: hidden">
    <div class="search" style="margin-bottom: 10px">角色：
      <el-input placeholder="请输入角色名称" clearable style="width:200px" v-model="roleName" size="small"
                prefix-icon="el-icon-search">
      </el-input>
      <el-button type="primary" size="small" style="margin-left:10px;" @click="getRoleList" icon="el-icon-search">查询</el-button>
    </div>
    <el-button style="color: #FFFFFF;background-color:#303e9d;margin-bottom: 5px" @click="addRole" v-if="authorityList.includes(512)">添加角色</el-button>
    <el-table :data="roleList" height="calc(100vh - 250px)"
              border stripe :cell-style="{ 'textAlign': 'center' }"
              :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="roleId" label="角色ID" width="80px"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDescription" label="角色描述"></el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#303e9d"
              inactive-color="#ff4949"
              :active-value=1
              :inactive-value=0>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <el-button size="small" style="background-color:#409EFF;color: #FFFFFF;border: none"><i-->
<!--              class="el-icon-edit"></i>编辑-->
<!--          </el-button>-->
          <el-button size="small" style="background-color:#F56C6C;color: #FFFFFF;border: none" @click="$message.success('重要角色不可删除！')"><i
              class="el-icon-delete" v-if="authorityList.includes(513)"></i>删除
          </el-button>
          <el-button size="small" style="background-color:#e6a23c;color: #FFFFFF;border: none" @click="splitAdd(scope.row)"><i
              class="el-icon-setting" v-if="authorityList.includes(514)"></i>分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加角色-->
    <el-dialog :visible.sync="addRoleDialog" center title="添加角色" width="30%">
      <div class="roleContent">
        <span>角色名称：<el-input style="width: 250px" size="small" v-model="roleName"></el-input></span>
        <span>角色描述：<el-input style="width: 250px" size="small" type="textarea"
                             v-model="roleDescription"></el-input></span>
        <span>是否启用：<el-switch v-model="status" active-color="#303e9d"
                              inactive-color="#ff4949"
                              active-value="1"
                              inactive-value="0"></el-switch></span>
      </div>
      <span slot="footer">
        <el-button style="color: #374151;background-color:#e0e0e0" @click="addRoleDialog=false">取消</el-button>
        <el-button style="color: #FFFFFF" @click="submitRole">确定</el-button>
      </span>
    </el-dialog>
    <!--    分配权限-->
    <assign-permissions ref="splitAssign"></assign-permissions>
  </div>
</template>

<script>
import assignPermissions from "./componentDialog/assignPermissions.vue";

export default {
  name: "roleList",
  components: {
    assignPermissions
  },
  data() {
    return {
      value: [103, 100],
      props: {multiple: true},
      roleList: [],
      addRoleDialog: false,
      splitRole: false,
      isIndeterminate: true,
      checkAll: false,
      roleName: "",
      roleDescription: "",
      status: "0",
      tags: [],
      authorityList: [],
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    addRole() {
      this.addRoleDialog = true
    },
    splitAdd(val) {
      this.$refs.splitAssign.handleOpen(val)
    },
    submitRole() {
      const data = {
        roleName: this.roleName,
        status: this.status,
        description: this.roleDescription
      }
      this.$api.roleAddRole(data).then(res => {
        if (res == 1) {
          this.addRoleDialog = false
          this.getRoleList()
          this.$message.success("操作成功！")
        }
      })
    },
    getRoleList() {
    this.$api.roleGetRoleList({roleName:this.roleName}).then(res=>{
     this.roleList=res
    })
    }
  }
}
</script>
<style scoped lang="less">

@import "../../assets/css/public.css";

.roleContent {
  //display: flex;
  //flex-direction: column;
  //
  //padding-right: 150px;
  span {
    display: block;
    margin-bottom: 15px;
  }

}

</style>